import { Navigate } from "react-router-dom";
import ReduxCommunication from "@/page/ComponentCommunication/ReduxCommunication";
import OneExample from "@/page/FlexLayout/OneExample/index"
import TwoExample from "@/page/FlexLayout/TwoExample/index"
import ThreeExample from "@/page/FlexLayout/ThreeExample/index"
import NotFound from "@/page/NotFound";
export interface RoutesItem {
  icon?: string;
  path: string | undefined;
  label: string;
  key: string | null | undefined;
  hidden?: Boolean;
  component?: React.ReactNode;
  children?: RoutesItem[] | undefined;
}

const routes: Array<RoutesItem> = [
  {
    path: "/",
    label: "Home",
    key: "home",
    hidden: true,
    component: <Navigate to="/componentCommunication"></Navigate>,
  },
  {
    path: "/componentCommunication",
    label: "组件通信",
    key: "componentCommunication",
    component: (
      <Navigate to="/componentCommunication/reduxCommunication"></Navigate>
    ),
    children: [
      {
        path: "/componentCommunication/reduxCommunication",
        label: "Redux 组件通信",
        key: "/componentCommunication/reduxCommunication",
        component: <ReduxCommunication />,
      },
    ],
  },
  {
    path: "/flexLayout",
    label: "测试",
    key: "flexLayout",
    component: (
      <Navigate to="/flexLayout/oneExample"></Navigate>
    ),
    children: [
      {
        path: "/flexLayout/oneExample",
        label: "九宫格布局",
        key: "/flexLayout/oneExample",
        component: <OneExample />,
      },
      {
        path: "/flexLayout/twoExample",
        label: "老虎机",
        key: "/flexLayout/twoExample",
        component: <TwoExample />,
      },
      {
        path: "/flexLayout/threeExample",
        label: "跑马灯",
        key: "/flexLayout/threeExample",
        component: <ThreeExample />,
      },
    ],
  },
  {
    path: "*",
    label: "404",
    key: "404",
    hidden: true,
    component: <NotFound />,
  },
];

export default routes;
